<template>
  <div>


      <el-main>
        <el-tabs v-model="activeName" @tab-click="handleClick" :tab-position="tabPosition" type="card">

          <!--      基本信息-->
          <el-tab-pane label="基本信息" name="first" :tab-position="tabPosition">
            <el-form v-model="transportDetails" label-width="120px" :inline="true" class="demo-form-inline">
              <el-form-item label="运输任务编号:">
                <el-input v-model="transportDetails.id" disabled/>
              </el-form-item>
              <el-form-item label="车牌号:">
                <el-input v-model="transportDetails.truckDto.licensePlate " disabled/>
              </el-form-item>
              <br/>
              <el-form-item label="车辆品牌:">
                <el-input v-model=" transportDetails.truckName" disabled/>
              </el-form-item>
              <el-form-item label="调度机构:">
                <el-input v-model="transportDetails.startAgencyName" disabled/>
              </el-form-item>
              <br/>
              <el-form-item label="起始地:">
                <el-input v-model="transportDetails.startAgencyName " disabled/>
              </el-form-item>

              <el-form-item label="目的地:">
                <el-input v-model="transportDetails.endAgencyName" disabled/>
              </el-form-item>
            </el-form>

          </el-tab-pane>

          <!--      任务轨迹-->
          <el-tab-pane label="任务轨迹" name="second">

            <el-form v-model="transportDetails" label-width="120px" :inline="true" class="demo-form-inline">
              <el-form-item label="车牌号:">
                <el-input v-model=" transportDetails.truckDto.licensePlate" disabled/>
              </el-form-item>

              <el-form-item label="车辆品牌:">

                <el-input v-model=" transportDetails.truckName" disabled/>
              </el-form-item>
              <el-form-item label="计划发车时间:">
                <el-input v-model="transportDetails.planDepartureTime" disabled/>
              </el-form-item>


              <el-form-item label="实际发车时间:">
                <el-input v-model="transportDetails.actualDepartureTime" disabled/>

              </el-form-item>

              <el-form-item label="计划到达时间:">
                <el-input v-model="transportDetails.planArrivalTime" disabled/>

              </el-form-item>

              <el-form-item label="实际到达时间:">
                <el-input v-model="transportDetails.actualArrivalTime" disabled/>
              </el-form-item>
            </el-form>

            <el-container>
              <el-aside width="1100px">
                <div id="container" style="height: 450px"></div>
                <div id="panel"></div>
              </el-aside>

            </el-container>
          </el-tab-pane>
          <el-tab-pane label="运单详情" name="third">
            <el-table :data="transportDetails.transportOrderList">
              <el-table-column label="运单编号" prop="id" width="180px"/>
              <el-table-column label="下单时间" prop="order.order.createTime" width="180"/>
              <el-table-column label="发件人姓名" prop="order.order.senderName"/>
              <el-table-column label="发件人电话" prop="order.order.senderPhone"/>
              <el-table-column label="发件人地址" prop="order.order.senderAddress" width="300px"/>
              <el-table-column label="货品数量" prop="order.orderCargo.quantity"/>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button size="mini" type="primary">
                      <b style="color: white" @click="jump(scope.row)">查看详情</b>
                  </el-button>
                </template>
              </el-table-column>
            </el-table>

          </el-tab-pane>
          <el-tab-pane label="交付照片" name="four">
            <el-form v-model="transportDetails" label-width="120px">
              <el-form-item label="交付货品照片:">
                <br/>
                <img :src="transportDetails.deliverPicture" @click="previewImg(transportDetails.deliverPicture)"/>
              </el-form-item>

              <el-form-item label="支付回单照片:">
                <img :src="transportDetails.transportCertificate" @click="previewImg(transportDetails.transportCertificate)"/>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="提货照片" name="five">
            <el-form v-model="transportDetails" label-width="120px">
              <el-form-item label="提货货品照片:">
                <br/>
                <img :src="transportDetails.cargoPicture" @click="previewImg(transportDetails.cargoPicture)"/>
              </el-form-item>

              <el-form-item label="提货凭证照片:">
                <br/>
                <img :src="transportDetails.cargoPickUpPicture" @click="previewImg(transportDetails.cargoPickUpPicture)"/>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>

      </el-main>

  </div>

</template>

<script>
import index from '@/api/transport/index'
import AMap from 'AMap'

export default {
  name: 'transport-details',
  data() {
    return {
      flag: false,
      tabPosition: 'left',
      activeName: 'first',
      transportDetails: {},
      //高德地图
      map: null,
      marker:null,
      drivingOption: null,
      // 构造路线导航类
      driving: null,
      //车辆当前位置
      //TODO 暂且使用初始位置,整合时在调用druid
      orderLng: '',
      orderLat: ''
    }
  },
  methods: {
    jump(row){
      this.$router.push({path:'/order/order-details/'+row.order.order.id});
    },
    previewImg(url){
      this.$hevueImgPreview(url)
    },
    showMap() {
      this.$nextTick(() => {
        //地图初始化
        this.map = new AMap.Map('container', {
          center: [this.transportDetails.startAgency.longitude, this.transportDetails.startAgency.latitude],
          zoom: 14
        })
        this.drivingOption = {
          policy: AMap.DrivingPolicy.LEAST_TIME,
          ferry: 1, // 是否可以使用轮渡
          province: '京',// 车牌省份的汉字缩写
          map: this.map
        }
        // 构造路线导航类
        this.driving = new AMap.Driving(this.drivingOption)
        // 根据起终点经纬度规划驾车导航路线
        this.driving.search(new AMap.LngLat(this.transportDetails.startAgency.longitude, this.transportDetails.startAgency.latitude),
          new AMap.LngLat(this.transportDetails.endAgency.longitude, this.transportDetails.endAgency.latitude), (status, result) => {
            // result即是对应的驾车导航信息，相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
            if (status === 'complete') {
              if (result.routes && result.routes.length) {
                log.success('绘制驾车路线完成');
                /**
                 * 车辆位置点
                 */
                this.truckLng = this.transportDetails.startAgency.longitude
                this.truckLat = this.transportDetails.startAgency.latitude
                this.marker = new AMap.Marker({
                  map: this.map,
                  position: [this.truckLng,this.truckLat],
                  icon: "https://webapi.amap.com/images/car.png",
                  offset: new AMap.Pixel(-26, -13),
                  autoRotation: true,
                  angle:90,
                });

              }
            } else {
              log.error('获取驾车数据失败：' + result)
            }
          })
      })
    },
    handleClick(tab, event) {
      let t = tab.index
      if (t === 1) {
        /**
         * 如果t==1则是任务轨迹页面,通过车辆id查询出它所对应的车队,司机,车牌号
         */
      }
    },
    /**
     * 根据运输Id获取运输任务详情
     * @param id
     */
    findTransportDetailsById(id) {
      index.findTransportDetailsById(id).then(data => {
        this.transportDetails = data.data
        this.$nextTick(() => {
          this.showMap()
        })
      }).catch(e => {

      })
    }

  },
  mounted() {
    if (this.$route.params && this.$route.params.id) {
      this.findTransportDetailsById(this.$route.params.id)

    }
  }
}
</script>

<style scoped>
html,
body,
#container {
  width: 100%;
  height: 100%;
}

#panel {
  position: fixed;
  background-color: white;
  max-height: 90%;
  overflow-y: auto;
  top: 10px;
  right: 500px;
  width: 280px;
}

#panel .amap-call {
  background-color: #009cf9;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

#panel .amap-lib-driving {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  overflow: hidden;
}
</style>
